<template>
  <div class="hyzxpj_box">
    <div class="hyzxpj_box_tab">
      <div class="zxph_tab">{{ this.$route.meta.title }}</div>
    </div>
    <div class="zntz_nr_box">
      <div
        class="zntz_nr"
        v-for="(item, index) in list"
        :key="index"
        @mouseenter="handleMouseEnter(index)"
        @mouseleave="handleMouseLeave(index)"
      >
        <div class="zntz_nr_item" :ref="`inrboxtem-${index}`">
          •&nbsp;
          {{ item.title }}
        </div>
        <div
          class="zntz_nr_button"
          :ref="`buttonbox-${index}`"
          v-if="item.status == 1"
          @click="handleClick(item)"
        >
          参与问卷
        </div>
        <div class="zntz_nr_button js" v-if="item.status == 0">未开始</div>
        <div class="zntz_nr_button js" v-if="item.status == 2">已结束</div>
        <div class="zntz_nr_button js" v-if="item.status == 3">已参加</div>
      </div>
      <div class="pagination_hy">
        <el-pagination
          hide-on-single-page
          background
          :pager-count="5"
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :current-page="page"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
    <script>
export default {
  data() {
    return {
      list: [],
      total: 0,
      page: 1,
    };
  },
  mounted() {
    this.getinfo();
  },
  methods: {
    /**
     * 分页
     * @param {页码} page
     */
    handleCurrentChange(page) {
      // 当分页发生变化时的处理函数
      this.page = page;
      this.getinfo();
    },
    /**
     * 获取列表
     */
    getinfo() {
      let that = this;
      let data = {
        page: that.page,
        type: 2,
      };
      that.$http.post("question/list", data).then((res) => {
        if (res.code === 1) {
          that.total = res.data.total;
          that.list = res.data.data;
        } else {
          that.total = 0;
          that.list = [];
        }
      });
    },
    /**
     * 跳转详情
     */
    handleClick(e) {
      let that = this
      let list = {};
      that.$http.post("user/check_fee_status", list).then((res) => {
        if (res.data.status == 0 || res.data.status == 2) {
          that.$self
            .ts(res, 2)
            .then(() => {
              if (userinfo.group_id == 1) {
                this.$router.push({
                  path: "/grjnhf",
                });
              }
            })
            .catch(() => {
              if (userinfo.group_id == 1) {
                this.$router.push({
                  path: "/grjnhf",
                });
              }
            });
        } else {
          // console.log(e)
          this.$router.push({ path: "/grwjdcxq_1", query: { id: e.id } });
        }
      });
    },
    /**
     * 鼠标移入效果
     * @param {DOM元素的下标} index
     */
    handleMouseEnter(index) {
      let i = `inrboxtem-${index}`;
      const elem = this.$refs[i][0]; // 获取DOM元素
      elem.classList.add("hover_nr"); // 添加class
      let a = `buttonbox-${index}`;
      const ele = this.$refs[a][0];
      ele.classList.add("hover_button");
    },
    /**
     * 鼠标移出效果
     * @param {DOM元素的下标} index
     */
    handleMouseLeave(index) {
      let i = `inrboxtem-${index}`;
      const elem = this.$refs[i][0];
      elem.classList.remove("hover_nr");
      let a = `buttonbox-${index}`;
      const ele = this.$refs[a][0];
      ele.classList.remove("hover_button"); // 移除class
    },
    //  ==
  },
};
</script>
  <style scoped>
.hyzxpj_box {
  background: #ffffff;
  border-radius: 0.125rem;
  box-shadow: 1px 1px 3px 2px rgba(0, 0, 0, 0.15);
  margin: 0.125rem 0.025rem 0 0.625rem;
}
.hyzxpj_box_tab {
  border-bottom: solid 0.0375rem #1954a4;
  display: flex;
  align-items: center;
  height: 0.75rem;
  padding-left: 0.25rem;
  box-sizing: border-box;
}

.zxph_tab {
  border-left: solid 0.075rem #1954a4;
  font-size: 0.25rem;
  font-weight: 400;
  color: #1954a4;
  padding-left: 0.2125rem;
  box-sizing: border-box;
}
.js {
  border: 1px solid #cccccc;
  color: #7c7c7c;
}
.zntz_nr_box {
  padding: 0.08rem 0.25rem 0.45rem 0.25rem;
}
</style>
</style>
    <style >
.zntz_nr_box {
  font-size: 0.2rem;
  font-weight: 400;
  color: #333333;
  /* padding: 0 0.275rem 0.5rem 0.275rem; */
}
.zntz_nr {
  height: 0.8375rem;
  border-bottom: 0.025rem dotted #ddd;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 0.0625rem;
}

.zntz_nr_button {
  width: 1.375rem;
  height: 0.4625rem;
  border: 1.5px solid #1954a4;
  border-radius: 0.075rem;
  text-align: center;
  line-height: 0.4625rem;
  color: #1954a4;
  cursor: pointer;
}
.zntz_nr_item {
  width: 11.25rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hover_nr {
  color: #1954a4;
}
.hover_button {
  color: #ffffff;
  background: #1954a4;
}
</style>